<!DOCTYPE html>
<html>
<head>
    {include file='public/meta'/}
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/cardlist.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/tools/market.css"/>

    <style>
        .thumb-hover.overlay-color.text-light::before {
            background: rgba(0,0,0,0.5);
        }

        .thumb-hover.overlay-color::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(255,255,255,0.5);
            z-index: 1;
            opacity: 0;
            filter: alpha(opacity=0);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            transition: opacity 0.4s ease;
        }
        .thumb-hover .overlay-caption:not(.align-left):not(.align-right) {
            text-align: center;
        }


        .thumb-hover .overlay-caption.hidden1 {
            opacity: 0;
            visibility: hidden;
            filter: alpha(opacity=0);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            transition: opacity 0.5s ease;
        }

        .thumb-hover .overlay-caption {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            padding: 7%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            height: auto;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
            z-index: 2;
        }
        .thumb-hover .overlay-caption.hidden1:not(.fade) .caption-sub, .thumb-hover .overlay-caption.hidden1:not(.fade) .caption-name {
            display: block;
            -webkit-transform: translateY(20px);
            -moz-transform: translateY(20px);
            -ms-transform: translateY(20px);
            -o-transform: translateY(20px);
            transform: translateY(20px);
            opacity: 0;
            filter: alpha(opacity=0);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            transition: all 0.6s ease 0s;
        }
        .card {
            background-color: rgb(99, 179, 89);
            margin: 0 auto;
            border-radius: 10px;
            color: #fff;
            width: 100%;
            padding: 20px 15px;
            position: relative;
            width: 260px;
            height: 156px;
        }
        .text{
            color:#fff;
            font-size:15px;
        }
        .text a{
            color:#fff;
            font-size:15px;
        }
        .text div{
            display:inline-block;
        }
    </style>
</head>
<body id="body">
{include file='public/header'/}
<!------------------导航-------------------------->
<section>
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content" id="page-memberCardSettings">
        <!--路径导航-->
        <ol class="breadcrumb mgl15 mgr15">
            <li>当前位置是&nbsp;:</li>
            <li>
                <a href="{:url('cardgifts/cardgiftracklist')}">货架管理</a>
            </li>
            <li style="color: #02b87f;">礼品卡集列表</li>
        </ol>
        <!--创建会员卡主要内容-->
        <div class="card-content mgl15 mgr15 clearfix">
            <form class="form-horizontal ">
                <div class="panel panel-default">
                    <div class="panel-heading">礼品卡集列表</div>
                    <div class="panel-body">
                        <div class=" member_card-list responsive row" id="cardlist">

                  

                            <div class="pull-left  pd15">
                                <div class="member_card-item">
                                    <a href="{:url('cardgifts/cardgiftrackthemeadd')}" data-toggle="modal" data-target="">
                                        <div class="member_card-body">
                                            <i class="glyphicon glyphicon-plus"></i>
                                            <div class="r-desc">创建礼品卡集</div>
                                        </div>
                                    </a>
                                </div>
                            </div>

                        </div>


                        <!---->
                    </div>
                </div>
            </form>
        </div>
        {include file='public/footer'/}
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">删除礼品卡集</h4>
                </div>
                <div class="modal-body">是否删除礼品卡集</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-id="" onclick="del();" id="cid">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</section>

<script>
function show(id){
    $("#cid").attr("data-id",id);
    $('#myModal').modal('show')

}
</script>
<script>
$(function(){
    $.ajax({
        url: "{:url('cardgifts/getgiftrackthemelist')}",
        type: "post",
        data: [],
        success: function (data) {
            // console.log(data);
            if(data.code==0){
                var datas=data.data;
                var fl="";
                // console.log(333333,datas);
                for (var i = 0; i < datas.length; i++) {

                    var url="/member.php/cardgifts/cardgiftrackthemeedit/id/"+datas[i].id+".html" ;
                    fl +="          <div class='pull-left pd15 cards'>\n" +
                        "  <div class='card thumb-hover overlay-color text-light' style='background-image: url("+ datas[i].theme_pic_url+");background-position:center center;background-repeat: repeat;background-size: cover;'>\n" +
                        "<div class='overlay-caption hidden1' ><div class='text'><div><a href='"+ url +"'>修改&nbsp;&nbsp;|</a></div><div onclick='show("+ datas[i].id +")'><a href='javascript:;'>&nbsp;&nbsp;删除</a></div></div> </div>\n" +
                        "                                        </div>\n" +
                        "                                <div class='pd15 clearfix' style='text-align: center;'>"+ datas[i].title+" \n" +
                        "\n" +
                        "                                </div>\n" +
                        "                            </div>";

                }
                $("#cardlist").append(fl);
            }
        }
    })
})
</script>
</body>
<script>
    function del(){
        var id=$("#cid").attr("data-id");
        $('#myModal').modal('hide');
        // console.log(id)
        // console.log(232);
        $.ajax({
            url:"{:url('cardgifts/cardgiftrackthemedel')}",
            data:{id:id},
            type:"post",
            success:function(data){
                // console.log(52132,data);
                if(data.code==0){
                    layer.msg(data.message);

                }else{
                    layer.msg(data.message);
                }

            }
        })
    }
</script>
</html>
